<template>
  <div class="list-container">
    <div class="bg-linear"
      id="linear">
      <div class="max-w-11xl mx-auto px-4 lg:flex lg:items-center py-5">
        <div class="lg:flex-1">
          <div class="text-base text-gray-1500 mb-3">
            {{$t('list_aiRankingByToolify')}}
          </div>
          <h1 class="text-40 text-gray-1000 break-words font-semibold"
            v-html="currentLabel ? $t('list_aiRankingByToolifyMonth',{date: currentLabel}) : $t('region_topAiMonthly')"></h1>
          <p class="text-base text-gray-1000 mt-3">
            {{$t('region_theListIsBasedOn_monthly')}}
          </p>
          <sponsored-by class="mt-4 text-lg text-gray-1000 font-semibold"></sponsored-by>
        </div>
        <div class="flex flex-wrap mt-4 gap-x-3 gap-y-4 lg:block lg:mt-0 lg:flex-shrink-0 lg:ml-3">
          <div class="flex items-center flex-wrap max-w-full gap-x-3 gap-y-4">
            <min-share class="min-share"></min-share>

            <el-popover placement="top"
              :trigger="_isMobile() ? 'click':'hover'">
              <div class="popover-box">
                <download-options @toDownload="toDownload"
                  :dStatus="dStatus"></download-options>
              </div>
              <div class="inline-flex items-center justify-center bg-purple-1300 px-3 py-3 group rounded-md hover:opacity-90 cursor-pointer"
                slot="reference">
                <svg-icon className="text-lg text-white"
                  :isDiv="true"
                  iconName='toolify_download'></svg-icon>
                <span class="text-sm text-white ml-2">{{$t('region_freeDownload')}}</span>
              </div>
            </el-popover>
          </div>
          <div class="flex justify-end flex-wrap max-w-full lg:mt-4">
            <a href="https://twitter.com/intent/user?&region=follow&screen_name=samChan3890089"
              rel="nofollow"
              target="_blank"
              class="flex-shrink-0 flex items-center justify-center bg-white px-3 h-11 group rounded-md hover:border hover:border-purple-1300 cursor-pointer">
              <svg-icon className="text-lg"
                :isDiv="true"
                iconName='twitter_logo'></svg-icon>
              <span class="text-sm text-gray-1000 ml-2 group-hover:text-purple-1300">{{$t('region_followUsToolify')}}</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="max-w-11xl mx-auto px-4 py-6">
      <rank-list-tabs></rank-list-tabs>

      <div class="lg:flex items-start gap-5 mt-3">
        <div class="lg:sticky lg:top-24 flex-shrink-0 bg-white rounded-md p-3 lg:w-44 max-w-full lg:space-y-1 flex flex-wrap gap-y-1 gap-x-4 lg:block sideBar-box overflow-y-auto"
          v-if="monthDate && monthDate.length > 0">
          <template v-for="(item, key) in monthDate">
            <common-link path="/Best-trending-AI-Tools/:month"
              :params="{month: `Best-ai-tools-in-${item.handle}`}"
              class="inline-flex lg:flex items-center h-11 px-3 rounded-md text-base"
              :class="{'text-purple-1300 bg-purple-1300 bg-opacity-10 hover:opacity-90': currentLabel && currentLabel === item.label, 'text-gray-1500 hover:text-purple-1300': !currentLabel || currentLabel !== item.label}"
              :key="item.month">{{item.label}}
            </common-link>
          </template>
        </div>
        <div class="flex-1 mt-5 lg:mt-0 lg:w-0 bg-white rounded-md p-5">
          <div class="tTable"
            style="overflow-x: auto;"
            v-if="tableData && tableData.length>0">
            <table style="width: 100%; min-width: 780px;"
              class="fixTable">
              <thead>
                <tr>
                  <th style="width: 10%">
                    <div class="cell text-sm">
                      {{$t('list_table_th_Ranking')}}
                    </div>
                  </th>
                  <th style="width: 18%">
                    <div class="cell text-sm">
                      {{$t('list_table_th_Tools')}}
                    </div>
                  </th>
                  <th style="width: 13%">
                    <div class="cell sortBox">
                      <span class="text-sm">
                        {{ $t('list_table_th_MonthlyVisit') }}</span>
                      <div class="sort">
                        <div class="asc"
                          :class="{'actived':direction==='asc' && order_by==='month_visited_count'}"
                          @click="sortChange(direction==='asc' && order_by==='month_visited_count'?null:{order:'asc',prop:'month_visited_count'})">
                          <svg-icon iconName='caret_up_default'></svg-icon>
                        </div>
                        <div class="desc"
                          :class="{'actived':direction==='desc' && order_by==='month_visited_count'}"
                          @click="sortChange(direction==='desc' && order_by==='month_visited_count'?null:{order:'desc',prop:'month_visited_count'})">
                          <svg-icon iconName='caret_down_default'></svg-icon>
                        </div>
                      </div>
                    </div>
                  </th>
                  <th style="width: 10%">
                    <div class="cell sortBox">
                      <span class="text-sm">{{ $t('list_table_th_Growth') }}</span>
                      <div class="sort">
                        <div class="asc"
                          :class="{'actived':direction==='asc' && order_by==='growth'}"
                          @click="sortChange(direction==='asc' && order_by==='growth'?null:{order:'asc',prop:'growth'})">
                          <svg-icon iconName='caret_up_default'></svg-icon>
                        </div>
                        <div class="desc"
                          :class="{'actived':direction==='desc' && order_by==='growth'}"
                          @click="sortChange(direction==='desc' && order_by==='growth'?null:{order:'desc',prop:'growth'})">
                          <svg-icon iconName='caret_down_default'></svg-icon>
                        </div>
                      </div>
                    </div>
                  </th>
                  <th style="width: 13%">
                    <div class="cell sortBox">
                      <span class="text-sm">
                        {{ $t('list_table_th_GrowthRate') }}</span>
                      <div class="sort">
                        <div class="asc"
                          :class="{'actived':direction==='asc' && order_by==='growth_rate'}"
                          @click="sortChange(direction==='asc' && order_by==='growth_rate'?null:{order:'asc',prop:'growth_rate'})">
                          <svg-icon iconName='caret_up_default'></svg-icon>
                        </div>
                        <div class="desc"
                          :class="{'actived':direction==='desc' && order_by==='growth_rate'}"
                          @click="sortChange(direction==='desc' && order_by==='growth_rate'?null:{order:'desc',prop:'growth_rate'})">
                          <svg-icon iconName='caret_down_default'></svg-icon>
                        </div>
                      </div>
                    </div>
                  </th>
                  <th style="width: 18%">
                    <div class="cell text-sm">
                      {{ $t('list_table_th_Introduction') }}</div>
                  </th>
                  <th style="width: 18%">
                    <div class="cell text-sm">
                      {{$t('list_table_th_tags')}}
                    </div>
                  </th>
                </tr>
              </thead>
            </table>
            <table style="width: 100%; min-width: 780px;"
              class="commonTable">
              <thead>
                <tr>
                  <th style="width: 10%">
                    <div class="cell text-sm">
                      {{$t('list_table_th_Ranking')}}
                    </div>
                  </th>
                  <th style="width: 18%">
                    <div class="cell text-sm">
                      {{$t('list_table_th_Tools')}}
                    </div>
                  </th>
                  <th style="width: 13%">
                    <div class="cell sortBox">
                      <span class="text-sm">
                        {{ $t('list_table_th_MonthlyVisit') }}</span>
                      <div class="sort">
                        <div class="asc"
                          :class="{'actived':direction==='asc' && order_by==='month_visited_count'}"
                          @click="sortChange(direction==='asc' && order_by==='month_visited_count'?null:{order:'asc',prop:'month_visited_count'})">
                          <svg-icon iconName='caret_up_default'></svg-icon>
                        </div>
                        <div class="desc"
                          :class="{'actived':direction==='desc' && order_by==='month_visited_count'}"
                          @click="sortChange(direction==='desc' && order_by==='month_visited_count'?null:{order:'desc',prop:'month_visited_count'})">
                          <svg-icon iconName='caret_down_default'></svg-icon>
                        </div>
                      </div>
                    </div>
                  </th>
                  <th style="width: 10%">
                    <div class="cell sortBox">
                      <span class="text-sm">{{ $t('list_table_th_Growth') }}</span>
                      <div class="sort">
                        <div class="asc"
                          :class="{'actived':direction==='asc' && order_by==='growth'}"
                          @click="sortChange(direction==='asc' && order_by==='growth'?null:{order:'asc',prop:'growth'})">
                          <svg-icon iconName='caret_up_default'></svg-icon>
                        </div>
                        <div class="desc"
                          :class="{'actived':direction==='desc' && order_by==='growth'}"
                          @click="sortChange(direction==='desc' && order_by==='growth'?null:{order:'desc',prop:'growth'})">
                          <svg-icon iconName='caret_down_default'></svg-icon>
                        </div>
                      </div>
                    </div>
                  </th>
                  <th style="width: 13%">
                    <div class="cell sortBox">
                      <span class="text-sm">
                        {{ $t('list_table_th_GrowthRate') }}</span>
                      <div class="sort">
                        <div class="asc"
                          :class="{'actived':direction==='asc' && order_by==='growth_rate'}"
                          @click="sortChange(direction==='asc' && order_by==='growth_rate'?null:{order:'asc',prop:'growth_rate'})">
                          <svg-icon iconName='caret_up_default'></svg-icon>
                        </div>
                        <div class="desc"
                          :class="{'actived':direction==='desc' && order_by==='growth_rate'}"
                          @click="sortChange(direction==='desc' && order_by==='growth_rate'?null:{order:'desc',prop:'growth_rate'})">
                          <svg-icon iconName='caret_down_default'></svg-icon>
                        </div>
                      </div>
                    </div>
                  </th>
                  <th style="width: 18%">
                    <div class="cell text-sm">
                      {{ $t('list_table_th_Introduction') }}</div>
                  </th>
                  <th style="width: 18%">
                    <div class="cell text-sm">
                      {{$t('list_table_th_tags')}}
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr class="el-table__row"
                  v-for="(row, key) in tableData"
                  :key="key">
                  <td rowspan="1"
                    colspan="1"
                    class="el-table_1_column_1   el-table__cell">
                    <div class="cell">
                      <svg-icon v-if="key<3"
                        className="text-3xl mx-auto no-color"
                        :iconName='`no${key+1}`'></svg-icon>
                      <div v-else
                        class="text-center">
                        {{ key+1 }}
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      <common-link path="/tool/:handle"
                        @click.native="handleExp(key, row)"
                        :params="{ handle:row.handle }"
                        :data-handle="row.handle"
                        :data-advertisement_id="row.advertisement_id ? row.advertisement_id : ''"
                        :data-position="currentLabel"
                        :data-index="key"
                        class="text-base text-gray-1000 font-semibold hover:text-purple-1300 go-tool tool-dom"
                        target="_blank">
                        {{$websiteName(row)}}
                      </common-link>
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      <span class="text-base text-gray-1000"
                        v-if="hasRealVal(row.month_visited_count)">
                        {{ row.month_visited_count | vResetVisit }}
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="cell flex items-center"
                      v-if="hasRealVal(row.growth)">
                      <down-or-up :duData="row.growth"
                        v-if="typeof row.growth === 'number' && row.growth !== 0"></down-or-up>
                      <span class="text-base text-gray-1000">
                        {{ $vReset(row.growth) }}
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="cell flex items-center"
                      v-if="hasRealVal(row.growth_rate)">
                      <down-or-up :duData="row.growth_rate"
                        v-if="typeof row.growth_rate === 'number' && row.growth_rate !== 0"></down-or-up>
                      <span class="text-base text-gray-1000">
                        {{ `${(row.growth_rate * 100).toFixed(2)}%` }}
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      <p class="text-sm text-gray-1000 break-words tool-desc leading-7"
                        :title="row.description">
                        {{row.description}}
                        <!-- {{ getLocaleText(row.description, row.description_locales) }} -->
                      </p>
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      <p class="text-sm text-gray-1500 break-words tool-desc leading-7"
                        :title="row.tags">
                        {{ row.tags && row.tags.length ? row.tags.join(', ') : '' }}
                      </p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="w-2/4 mx-auto mt-6 text-center"
            v-if="tableData && tableData.length>0">
            <el-button type="text"
              v-if="tableData && tableData.length>0 && next_page_url"
              class="cursor-default">
              <img src="@/static/images/loading.png"
                class="loading"
                alt=""
                srcset="">
            </el-button>

            <el-divider v-else
              class="mt-12">
              <el-button type="text"
                class="cursor-default"
                :loading="loading">{{ $t('list_end') }}</el-button>
            </el-divider>
          </div>
          <el-empty v-if="(!tableData || tableData.length===0) && !loading"
            :description="$t('list_noData')"></el-empty>
        </div>
      </div>
    </div>

    <download-dom :title="currentLabel ? $t('list_bestAIToolsInMonth',{month: currentLabel}) : $t('list_bestTrendingAITools')"
      :list="downloadList"
      :downloadType="downloadType"
      :pageDataNum="10"
      :toolCount="toolCount"
      :tableType="4"
      ref="download"
      @downloadStatus="downloadStatus">
      <div class="flex items-center"
        slot="data">
      </div>
    </download-dom>
  </div>
</template>

<script>
import moment from 'moment'
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  name: 'BestAIToolsRegion',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.title,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
        {
          hid: 'og:image:alt',
          name: 'og:image:alt',
          content: this.title,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  async asyncData({ app, route, params, query, $axiosApi, error, store }) {
    try {
      let req = JSON.parse(
        JSON.stringify({
          page: 1,
          per_page: 50,
        })
      )

      let res = {}

      function fI18n(arg) {
        const hasKey = app.i18n.t(arg)
        if (hasKey) {
          const result = app.i18n.t(arg)
          return result
        }
        return arg
      }

      let handle
      if (params.month) {
        handle = params.month.replace('Best-ai-tools-in-', '').replace('-', ' ')

        let dateArr = handle.split(' ')

        const date = new Date(`${dateArr[0]} 01, ${dateArr[1]}`)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        req.date = `${year}-${month}-${day}`

        res.currentDate = req.date

        res.currentLabel = app.appFormattedDate(
          parseInt(new Date(`${res.currentDate}T00:00:00Z`).getTime()) / 1000,
          fI18n,
          store.state.locale,
          true,
          false
        )
      }

      let toolsRes = await $axiosApi.getTopMonth({
        ...req,
        order_by: 'growth',
        direction: 'desc',
      })

      let description,
        title,
        toolCount = 0

      if (toolsRes.code === 200) {
        toolCount = toolsRes.data.tool_count
        res.tableData =
          toolsRes.data.data && toolsRes.data.data.length > 0
            ? toolsRes.data.data
            : []

        res.page = toolsRes.data.current_page ? toolsRes.data.current_page : 1
        res.per_page = toolsRes.data.per_page ? toolsRes.data.per_page : 50
        res.next_page_url = toolsRes.data.next_page_url
          ? toolsRes.data.next_page_url
          : null
        res.total = toolsRes.data.total
        res.monthDate = []
        if (toolsRes.data.month_date && toolsRes.data.month_date.length > 0) {
          toolsRes.data.month_date.forEach((item, key) => {
            let label = app.appFormattedDate(
              parseInt(new Date(`${item}T00:00:00Z`).getTime()) / 1000,
              fI18n,
              store.state.locale,
              true,
              false
            )
            const uri = app.appFormattedDate(
              parseInt(new Date(`${item}T00:00:00Z`).getTime()) / 1000,
              fI18n,
              'en',
              true,
              false
            )

            if (
              (!params.month && key === 0) ||
              (params.month &&
                moment(item).format('MMMM-YYYY') === handle.replace(' ', '-'))
            ) {
              res.currentLabel = label
            }

            res.monthDate.push({
              label: label,
              month: uri.replace(' ', '-'),
              handle: moment(item).format('MMMM-YYYY'),
            })
          })
        }

        description = app.i18n.t('list_trending_head_desc', {
          date: res.currentLabel,
        })
        title = app.i18n.t('list_trending_head_title', {
          date: res.currentLabel,
        })
      } else {
        if (toolsRes && toolsRes.code && toolsRes.code === 404) {
          error({ statusCode: 404 })
        } else if (!(toolsRes && toolsRes.code && toolsRes.code === 401)) {
          error({
            message:
              'There is a problem with the network. Please refresh and try again later',
            statusCode: toolsRes.code,
          })
        }
      }

      return {
        ...res,
        title,
        description,
        toolCount,
      }
    } catch (err) {
      console.log(err)
    }
  },
  filters: {
    vReset: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val ? val : 0
      }
    },
    vResetVisit: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val < 5000) {
          return '< 5K'
        } else if (val >= 5000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return '< 5K'
      }
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  mixins: [mixinsExposure],
  data() {
    return {
      uri: `https://www.toolify.ai${this.$route.fullPath}`,
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
      tableData: [],
      page: 1,
      per_page: 50,
      order_by: 'growth',
      direction: 'desc',
      //当前月份
      month: null,

      next_page_url: null,
      errorImage: require('@/static/images/default.webp'),
      loading: false,
      total: 0,
      total_monthly_visits: 0,
      region_total_monthly_visits: 0,
      monthDate: [],
      visible: false,
      //当前月份
      currentDate: null,
      currentLabel: null,

      toolCount: 0,
      downloadList: [],
      downloadType: 'pdf',
      dStatus: null,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.onSroll)
    window.addEventListener('resize', this.setMaxHeight)
    this.setMaxHeight()
  },
  methods: {
    ...mapActions(['exposure']),
    ...mapMutations(['SET_RetrackExposure']),
    onSroll() {
      this.setMaxHeight()
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight

      const footerHeight = document.querySelector('footer').offsetHeight
      //滚动条到底部的条件
      if (scrollTop + windowHeight + 1200 > scrollHeight - footerHeight) {
        if (this.next_page_url && !this.loading) {
          this.getList(this.page + 1)
        }
      }
    },
    setMaxHeight() {
      this.thFixed()

      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      //变量windowHeight是可视区的高度
      var windowWidth =
        document.documentElement.clientWidth || document.body.clientWidth
      let sideBarDom = document.querySelector('.sideBar-box') // 通过id获取div元素
      const distanceToTop = sideBarDom.getBoundingClientRect().top
      let maxHeight = windowHeight - distanceToTop - 20

      if (maxHeight > 400 && windowWidth >= 1024) {
        sideBarDom.style.maxHeight = `${maxHeight}px`
      } else {
        sideBarDom.style.maxHeight = '400px'
      }
    },
    thFixed() {
      if (
        !document.querySelector('.commonTable') ||
        !document.querySelector('.fixTable')
      ) {
        return false
      }
      const commonTable = document.querySelector('.commonTable')
      const fixTable = document.querySelector('.fixTable')

      const tableWidth = commonTable.offsetWidth
      const tableHeight = commonTable.offsetHeight
      const fixTableHeight = fixTable.offsetHeight
      const tableTop = commonTable.getBoundingClientRect().top
      const tableOffsetTop = commonTable.offsetTop
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      if (
        tableWidth > 780 &&
        tableTop <= 72 &&
        scrollTop < tableOffsetTop + tableHeight - fixTableHeight - 72
      ) {
        const distanceToLeft = commonTable.getBoundingClientRect().left
        const distanceToRight =
          window.innerWidth - commonTable.getBoundingClientRect().right

        fixTable.style.width = `${tableWidth}px`
        fixTable.style.zIndex = 10
        fixTable.style.left = `${distanceToLeft}px`
        fixTable.style.right = `${distanceToRight}px`
        fixTable.style.opacity = 1
      } else {
        fixTable.style.zIndex = -999
        fixTable.style.opacity = 0
      }
    },
    async getList(page) {
      this.loading = true
      try {
        let req = JSON.parse(
          JSON.stringify({
            page: page,
            per_page: 50,
          })
        )
        if (this.$route.params.month) {
          req.date = this.currentDate
        }
        if (this.direction) {
          req.direction = this.direction
        }
        if (this.order_by) {
          req.order_by = this.order_by
        }

        const res = await this.$axiosApi.getTopMonth({
          ...req,
        })

        this.loading = false
        if (res.code === 200) {
          if (page === 1) {
            this.tableData = res.data.data
          } else {
            this.tableData = this.tableData.concat(res.data.data)
          }

          this.page = res.data.current_page ? res.data.current_page : 1
          this.per_page = res.data.per_page ? res.data.per_page : 50
          this.next_page_url = res.data.next_page_url
            ? res.data.next_page_url
            : null
          this.total = res.data.total
          this.SET_RetrackExposure(Date.now())
        } else {
          //this.$message.error(res.message)
        }
      } catch (error) {
        this.loading = false
      }
    },
    sortChange(column) {
      if (column && column.order) {
        this.direction = column.order
        this.order_by = column.prop
      } else {
        this.direction = null
        this.order_by = null
      }
      this.getList(1)
    },

    toDownload(type) {
      this.dStatus = type
      this.downloadType = type

      let dataArr = this.tableData.slice(0, 50)
      this.downloadList = JSON.parse(JSON.stringify(dataArr))

      this.$nextTick(function () {
        if (this.$refs.download) {
          if (type === 'pdf') {
            this.$refs.download.getPdf()
          } else {
            this.$refs.download.getPic()
          }
        }
      })
    },
    downloadStatus(status) {
      this.dStatus = status
    },
    _isMobile() {
      if (process.browser) {
        let flag = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
        return flag
      } else {
        return false
      }
    },
    //判断是否是当前页面
    getClassObj(val) {
      if (this.$route.name === val || this.$route.name === `lang-${val}`) {
        return 'px-8 bg-purple-1300 text-white hover:opacity-90'
      } else {
        return 'text-gray-1000 hover:text-purple-1300'
      }
    },
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },

    handleExp(key = 0, toolsData) {
      this.getThrottledClickFunction(toolsData, key)()
    },
    getThrottledClickFunction(toolsData, key) {
      let functionKey = `${toolsData.handle}-${key}`
      if (!this.throttledClickFunctions[functionKey]) {
        this.throttledClickFunctions[functionKey] = _.throttle(() => {
          let exporeData = this.getExporeData(
            toolsData,
            this.currentLabel,
            key,
            false
          )
          this.exposure({
            ...exporeData,
          })
        }, 2000) // 设置节流时间间隔
      }
      return this.throttledClickFunctions[functionKey]
    },
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onSroll, false)
    window.removeEventListener('resize', this.setMaxHeight, false)
  },
}
</script>
<style lang='scss' scoped>
.list-container {
  background-color: #fafafa;
  ::v-deep .el-loading-mask {
    svg {
      margin-left: auto;
      margin-right: auto;
    }
  }
  ::v-deep .el-loading-mask {
    svg {
      margin-left: auto;
      margin-right: auto;
    }
  }
  /* .sideBar-box {
    max-height: 400px;
  } */
  .tTable {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    table {
      table-layout: fixed;
      td,
      th {
        box-sizing: border-box;
        min-width: 0;
        padding: 12px 0;
        position: relative;
        text-align: left;
        text-overflow: ellipsis;
        vertical-align: middle;
        .cell {
          box-sizing: border-box;
          display: inline-block;
          padding-left: 10px;
          padding-right: 10px;
          position: relative;
          vertical-align: middle;
          width: 100%;
          text-overflow: ellipsis;
          line-height: 23px;
          overflow: hidden;
        }
        &:first-child {
          .cell {
            padding-left: 14px;
            text-align: center;
          }
        }
        &:last-child {
          .cell {
            padding-right: 14px;
          }
        }
      }
      &.fixTable {
        position: fixed;
        top: 72px;
        z-index: 10;
      }
      thead {
        tr {
          th {
            background: #f8f9fb;
            color: #666;
            font-weight: 400;
            border-bottom: 1px solid #ebeef5;
            .sortBox {
              display: flex;
              align-items: center;
              .sort {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-left: 4px;
                .asc,
                .desc {
                  width: 8px;
                  height: 8px;
                  cursor: pointer;
                  svg {
                    font-size: 8px;
                    fill: #999;
                  }
                  &.actived {
                    svg {
                      fill: #7150e6;
                    }
                  }
                }
                .desc {
                  margin-top: 1px;
                }
              }
            }
          }
        }
      }
      tbody {
        tr {
          td {
            border-bottom: 1px solid #e5e5e5;
            color: #191919;
            font-size: 16px;
            padding-bottom: 16px;
            padding-top: 16px;
            transition: background-color 0.25s ease;
            .no-color {
              color: rgba(0, 0, 0, 0);
            }
            .no-color {
              color: rgba(0, 0, 0, 0);
            }
          }
          &:hover {
            td {
              background-color: #f5f7fa;
            }
          }

          &:last-child {
            td {
              border-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>
